<template>
    <div>
        <x-header style="width:100%;position:absolute;left:0;top:0;z-index:100;" :title="title" :left-options="leftOptions">
            <span slot="right">
                <slot name="icon"></slot>
              </span>
        </x-header>
        <slot name=></slot>
        <view-box ref="viewBox" body-padding-top="46px" body-padding-bottom="55px">
            <slot>
                <msg title="暂无数据" description="" icon="info"></msg>
            </slot>
        </view-box>


        <tabbar v-if="showTabBar">
            <!-- <tabbar-item link="/customer" :selected=" selectedTab === 'sale' ">
                <span slot="label">业务</span>
            </tabbar-item> -->
            <tabbar-item show-dot badge="2" link="/repair" :selected=" selectedTab === 'repair' ">
                <span slot="label">售后</span>
            </tabbar-item>
            <tabbar-item link="/me" :selected="selectedTab==='me' ">
                <span slot="label">我</span>
            </tabbar-item>
            <tabbar-item v-if="debug" link="/test" :selected="selectedTab==='test' ">
                <span slot="label">切换</span>
            </tabbar-item>
        </tabbar>
    </div>
</template>

<script>
    import { Tabbar, TabbarItem, ViewBox, XHeader, Msg } from 'vux'
    import { mapState } from 'vuex'

    export default {
        name: 'app',
        props: {
            title: { //标题栏
                type: String
            },
            showBack: Boolean,
            showTabBar: Boolean,
            selected: String,
        },
        watch: {
            showBack(val, oldVal) {
                this.leftOptions.showBack = val
            },
            selected(val, oldVal) {
                if (val === "repair") this.selectTabIndex = 1
                else if (val === "me") this.selectTabIndex = 2
                else this.selectTabIndex = 0
            }
        },
        components: {
            Tabbar,
            TabbarItem,
            ViewBox,
            XHeader,
            Msg,
        },
        data() {
            return {
                selectTabIndex: 1,
            }
        },
        computed: {
            ...mapState({
                leftOptions: state => state.nav.leftOptions,
                selectedTab: state => state.nav.selectedTab,
                debug: state => state.user.debug,
            })
        },
        methods: {
            iconClick() {
                this.icon.onclick && this.icon.onclick()
            }
        },
        mounted() {
            console.log(this.selectedTab)
        }
    }

</script>

<style lang="less">
    @import '~vux/src/styles/reset.less';
    @import '~vux/src/styles/1px.less';
    @import '~vux/src/styles/tap.less';
    body {
        background-color: #fbf9fe;
    }

    html,
    body {
        height: 100%;
        width: 100%;
        overflow-x: hidden;
    }


    .vux-demo-header-box {
        z-index: 100;
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
    }

</style>
